<template>
  <div style="height:100%;width:100%;position:relative;" ref="maindev">
      <div class="pagetop" ref="buttondiv">
          <table style="width:100%;font-size:12px;border-spacing: 5px;" border="0">
              <tr>
                  <td align="center" style="width:80px">报告单元</td>
                  <td style="width:200px">
                      <rm-ddl-rptunit prgno="LIS643" defaultflag="1" v-model="rptunitid" width="100%" @change="rptunitChange"></rm-ddl-rptunit>
                  </td>
                  <td align="center" style="width:80px">检验日期</td>
                  <td style="width:200px">
                      <el-date-picker v-model="datetime1" type="date" placeholder="开始日期" value-format="yyyy-MM-dd 00:00:00" size="mini" :clearable="false" style="width:100%"></el-date-picker>
                  </td>
                  <td align="center" style="width:80px">至</td>
                  <td style="width:200px">
                      <el-date-picker v-model="datetime2" type="date" placeholder="结束日期" value-format="yyyy-MM-dd 23:59:59" size="mini" :clearable="false" style="width:100%"></el-date-picker>
                  </td>
                  <td colspan="13" style="width:200px">
                      <el-checkbox v-model="redoflag" true-label="1" false-label="0" style="margin-left:5px">无需复查的项目不统计</el-checkbox>
                  </td>
              </tr>
              <tr>
                  <td colspan="13" align="right">
                      <el-button @click.native="QueryData()" v-has="'PINQUERY'" type="primary" icon="el-icon-search">查询</el-button>
                      <el-button @click.native="BtnSort" icon="el-icon-sort">排序</el-button>
                      <el-button @click.native="BtnClear" icon="el-icon-close">清除</el-button>
                      <el-button @click.native="BtnExport" icon="el-icon-download">导出</el-button>
                      <el-button @click.native="BtnPrint(1)" icon="el-icon-printer">打印</el-button>
                      <el-button @click.native="BtnPrint(2)" class="el-icon-printer">打印样式设计</el-button>
                  </td>
              </tr>
          </table>
      </div>
      <div class="pagecenter" ref="centerdev">
          <vxe-table show-overflow ref="xTable1" :height="tableheight" :loading="loading" :data.sync="tableData" class="editable-footer" border size="mini" show-header-overflow highlight-current-row highlight-hover-row show-footer resizable stripe>

              <vxe-table-column field="itemcode_en" title="项目代号" width="100" header-align="center" align="left"></vxe-table-column>
              <vxe-table-column field="rpt_itemname" title="项目名称" width="150" header-align="center" align="left"></vxe-table-column>
              <vxe-table-column field="cp_itemcount" title="检验次数" width="100" header-align="center" align="center"></vxe-table-column>
              <vxe-table-column field="cp_redocount" title="复查次数" width="100" header-align="center" align="center"></vxe-table-column>
              <vxe-table-column field="cp_rate" title="复查率（%）" width="100" header-align="center" align="center"></vxe-table-column>
          </vxe-table>
      </div>
  </div>
</template>

<script type="text/javascript">
import XEUtils from 'xe-utils';
export default {
  name: 'LIS644',
  data() {
      return {
          //筛选项目
          datetime1: '',
          datetime2: '',
          redoflag: '0',
          rptunitid: '', //报告单元
          //表格属性
          tableheight: 'auto',
          loading: false,
          //表格内容
          tableData: [],
          tableColumn: [],
          //以下为排序数组
          sortArr: [],
          SortTableColumn: [],
          rptStyleSettingState: false,
      };
  },
  created() {
      this.QueryOption();
  },
  updated() {
  },
  methods: {
      QueryData() {
          this.loading = true;
          this.$tool
              .request({
                  url: 'LIS/LIS6/LIS644',
                  method: 'post',
                  data: {
                      action: 'queryData',
                      startdate: this.datetime1,
                      enddate: this.datetime2,
                      rptunitid: this.rptunitid,
                      redoflag: this.redoflag,
                      sortArr: this.sortArr, //排序
                  },
              })
              .then((res) => {
                  this.loading = false;
                  this.tableData = res.Data;
                  this.SortTableColumn = res.Cols
              });
      },
      QueryOption() {
          this.$tool
              .request({
                  url: 'LIS/LIS6/LIS644',
                  method: 'post',
                  data: {
                      action: 'initOption',
                  },
              })
              .then((res) => {
                  this.datetime1 = res.datetime + ' 00:00:00';
                  this.datetime2 = res.datetime + ' 23:59:59';
              });
      },
      rptunitChange(code, name) {
          this.rptunitid = code;
      },
      BtnExport() {
          this.$refs.xTable1.exportCsv({ filename: 'LIS643项目阳性率统计' });
      },
      clearData() {
          this.tableData = [];
          //会导致表头渲染错位
          // this.tableColumns = [];
      },
      BtnSort() {
          this.$rmsort(
              { tableColumn: this.SortTableColumn, sortArr: this.sortArr },
              {
                  confirmButtonText: "确定",
                  cancelButtonText: "取消",
                  type: "warning",
              }
          )
              .then((res) => {
                  this.sortArr = res.data;
                  this.QueryData();
              })
              .catch(() => { });
      },
      //清除
      BtnClear() {
          this.datetime1 = '';
          this.datetime2 = '';
          this.rptunitid = '';
          this.redoflag = '0';
          this.sortArr = [];
          this.tableData = [];
      },
      //导出
      BtnExport() {
          let options = {
              filename: "LIS644 项目复查率统计.csv",
          };
          this.$refs.xTable1.exportCsv(options);
      },
      //获取登录类型
      GetLoginuType() {
          let loginutype = this.$tool.getSession(this.$tool.loginutype);
          if (loginutype == "G") {
              this.rptStyleSettingState = true;
          }
      },
      //打印
      BtnPrint(index) {
          var data = this.$refs.xTable1.afterFullData;
          if (data.length > 0) {
              const rload = this.$pub.openLoading(this, "正在打开报表设计器，请稍候……");
              let column = this.$refs.xTable1.getTableColumn().tableColumn;
              let str = JSON.stringify(this.$pub.InitColumn(column));
              str += "\r";
              str += JSON.stringify(data);
              let sql = btoa(encodeURIComponent(str));
              if (index == "1") {
                  jsObj.PrintCustomJsonReport("5071", sql, this.userno, "项目复查率统计样式", "");
              } else {
                  jsObj.SetCustomJsonPrintConfig("5071", sql, this.userno, "项目复查率统计样式");
              }
              rload.close();
          } else {
              this.$alert("请选中要打印的数据！");
          }
      },
  },
};
</script>

<style scoped>
.pagetop {
  width: 100%;
  height: 70px;
  display: -webkit-box;
  -webkit-box-pack: left;
  -webkit-box-align: center;
  border: 1px solid #ccc;
  position: absolute;
  z-index: 99;
}

.pagecenter {
  position: absolute;
  top: 75px;
  width: 100%;
  left: 0;
  bottom: 0px;
  overflow: auto;
}
table tr td:nth-child(1) {
  width: 80px;
}
.left_nav {
  width: 20%;
  height: 100%;
  border-right: 1px solid #ccc;
  padding: 0px 0px 0px 0px;
  float: left;
  display: inline;
}
.left_nav div {
  cursor: pointer;
  height: 40px;
  width: 100%;
  float: left;
  padding-left: 20px;
  line-height: 40px;
}
.left_nav .active {
  background-color: DeepSkyBlue;
}
.right_nav {
  width: 80%;
  height: 100%;
  display: inline-block;
  vertical-align: top;
  float: left;
  display: inline;
}
::v-deep .el-input--suffix .el-input__inner {
  padding-right: 10px;
}
</style>
